<script setup lang="ts">
import tu4 from "@@/assets/images/layouts/logo.png"
import aiStudy1 from "@@/assets/images/layouts/ai-fagui.png"
import aiStudy2 from "@@/assets/images/layouts/ai-jianguan.png"
import aiStudy3 from "@@/assets/images/layouts/ai-hangye.png"
import aiStudy4 from "@@/assets/images/layouts/ai-shijian.png"
import zuoce from "@@/assets/images/layouts/zuoce-48-48.png"
import ai_lingyu from "@@/assets/images/layouts/ai-huiyuandengji.png"
import ai_fenlei from "@@/assets/images/layouts/ai-fenlei.png"
import ai_renqun from "@@/assets/images/layouts/ai-renqun.png"
import ai_jiaoxue from "@@/assets/images/layouts/ai-jiaoxue.png"
import ai_gongwenbao from "@@/assets/images/layouts/ai-gongwenbao.png"
import aiYaoSuKa1 from '@@/assets/images/layouts/ai-word1.png';
import aiYaoSuKa11 from '@@/assets/images/layouts/ai-word11.png';
import aiYaoSuKa2 from '@@/assets/images/layouts/ai-word2.png';
import aiYaoSuKa21 from '@@/assets/images/layouts/ai-word21.png';
import aiYaoSuKa3 from '@@/assets/images/layouts/ai-word3.png';
import aiYaoSuKa31 from '@@/assets/images/layouts/ai-word31.png';
import close from '@@/assets/images/layouts/close.png';
import {
  getCourseListApi, getCardDetailDetailApi, getCourseDetailApi, sendCommentApi, doLikeApi, doCollectApi,
  doUnLikeApi
} from "@/api"
import aiStudy5 from "@@/assets/images/layouts/ai-yanjiu.png"
import aiStudy6 from "@@/assets/images/layouts/ai-wenti.png"
import tu3 from "@@/assets/images/layouts/tu3.png"
import { useUserStore } from "@/pinia/stores/user.js"
import { onBeforeMount, ref} from "vue"
import {LoginRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
import type {FormRules} from "element-plus";
import {loginApi} from "@/pages/login/apis";
import goodGray from "@@/assets/images/layouts/good-gray.png";
import starGray from "@@/assets/images/layouts/star-gray.png";
import goodBlue from "@@/assets/images/layouts/good-blue.png";
import starBlue from "@@/assets/images/layouts/star-blue.png";
import commentGray from "@@/assets/images/layouts/commentGray.png";
import shareGray from "@@/assets/images/layouts/shareGray.png";
import groupGray from "@@/assets/images/layouts/groupGray.png";
import linkGray from "@@/assets/images/layouts/linkGray.png";
import Head from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
const userStore = useUserStore()
const dialogVisible = ref(false)
const router = useRouter()
const token = ref("")
const loading = ref(false)
const list = ref([]) // 10条AI推荐列表数据
const courseList1 = ref([])
const courseList2 = ref([])
const courseList3 = ref([])
const courseList4 = ref([])
const courseList5 = ref([])
const courseList6 = ref([])
const username = ref("")
const route = useRoute()
const commentDialog = ref(false)
const shareDialog = ref(false)
const id = ref(route.params.id)
const textToCopy = ref('');
const formSendData = ref({
  id: 1,
  title: "",
  description: "",
  content: ""
})

const goodImg = ref(goodGray)
const starImg = ref(starGray)
const commentImg = ref(commentGray)
const shareImg = ref(shareGray)
const groupImg = ref(groupGray)
const linkImg = ref(linkGray)
const commentForm = ref("")
const commentImgList = ref([]) // 评论图片列表
const moreCommentImgList = ref([]) // 更多评论图片列表
const currentCommentImgNumber = ref(0) // 当前图片索引
const uploadUrl = ref("https://www.sacasaca.com/shop122/uploadfile")
const courseDetailDetail = ref({
  id: "",
  title: "",
  saca_description: "",
  xiangsidu_qujian: "",
  collect_num: 0,
  good_num: 0,
  isDoCollected: 0,
  share_num: 0,
  isDoLike: 0,
  comment_num: 0,
  pian_total: 0, // 找到相关文章的篇数
})
/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  code: [
  ]
}
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  username.value = userStore.getUserName().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  console.log( 'id :' + id.value)
  getCourseList()
  getCourseDetail()
})
/** 登录 */
function handleLogin() {
  loginFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loginFormData.username = loginFormData.account
    loginFormData.mobile = loginFormData.account
    loading.value = true
    loginApi(loginFormData).then(({ data }) => {
      userStore.setUsername(data.mobile) // token-admin
      userStore.setToken(data.token) // token-admin
      dialogVisible.value = false
    }).catch(() => {
      ElMessage.error({
        message: "验证失败",
        type: "warning",
        duration: 2000
      })
      // loginFormData.password = ""
    }).finally(() => {
      loading.value = false
    })
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
  userStore.setUserId(0)
}
function getCourseList() {
  const data = {
    page: 1,
    type: 'course',
    limit: 10
  }
  getCourseListApi( data ).then(({ TableData, code }) => {
    courseList1.value = TableData
    console.log(courseList1.value)
  })
}
function getCourseDetail() {
  if (id.value) {
    const data = { id: parseInt(id.value), user_id: userStore.getUserId().value }
    getCourseDetailApi( data ).then(({ data, code }) => {
      if (code === 0) {
        courseDetailDetail.value.saca_description = data.content
        courseDetailDetail.value.title = data.title
        courseDetailDetail.value.collect_num = data.collect_num
        courseDetailDetail.value.good_num = data.good_num
        courseDetailDetail.value.comment_num = data.comment_num
        courseDetailDetail.value.share_num = data.share_num
        courseDetailDetail.value.isDoLike = data.is_liked
        courseDetailDetail.value.isDoCollected = data.is_collected
        console.log(courseDetailDetail.value)
      }
    })
  }
}

function cancelComment() {
  commentForm.value =  ""
  commentDialog.value = false
}
/** 提交评论 */
function handleComment() {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  // 处理上传的图片 commentImgList去除空元素
  commentImgList.value.forEach((item) => {
    if (item === "") {
      commentImgList.value.splice(commentImgList.value.indexOf(item), 1)
    }
  })

  if (commentForm.value !== "") {
    const data2 = {
      source_id: formSendData.value.id,
      contents: commentForm.value,
      user_id: userStore.getUserId().value,
      ctype: 1,
      img_list: commentImgList.value.join( ","), // 多图列表
      action: 2
    }
    sendCommentApi(data2).then((data) => {
      commentDialog.value = false
      commentForm.value =  ""
      courseDetailDetail.value.comment_num = courseDetailDetail.value.comment_num + 1
      ElMessage.success({
        message: "评论成功",
        type: "success",
        duration: 2000
      })
    })
  } else {
    ElMessage.error({
      message: "请输入评论内容",
      type: "warning",
      duration: 2000
    })
  }

}
function doLike(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 1,
    action: 1
  }
  doLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      courseDetailDetail.value.isDoLike = 1
      courseDetailDetail.value.good_num = courseDetailDetail.value.good_num + 1
      ElMessage.success({
        message: "点赞成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function doCollect(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 1,
    img_list: "",
    action: 3
  }
  doCollectApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      courseDetailDetail.value.isDoCollected = 1
      courseDetailDetail.value.collect_num = courseDetailDetail.value.collect_num + 1
      ElMessage.success({
        message: "收藏成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}

function doUnLike(pid, action) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if( pid == "" || !pid) {
    return ElMessage.error({
      message: "ID参数错误",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 1,
    action: action
  }
  doUnLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      if (action === 1) {
        courseDetailDetail.value.isDoLike = 0
        courseDetailDetail.value.good_num = courseDetailDetail.value.good_num - 1
        ElMessage.success({
          message: "取消点赞成功",
          type: "success",
          duration: 2000
        })
      } else if (action === 3) {
        courseDetailDetail.value.isDoCollected = 0
        courseDetailDetail.value.collect_num = courseDetailDetail.value.collect_num - 1
        ElMessage.success({
          message: "取消收藏成功",
          type: "success",
          duration: 2000
        })
      }
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function showCommentDialog(pid) {
  formSendData.value.id = pid
  console.log(formSendData.value.id )
  commentDialog.value = true
}
function showShareDialog(pid) {
  if ( token.value == "" || userStore.getUserId().value == 0) {
    ElMessage.error({
      message: "请先登录，再打卡！",
      type: "success",
      duration: 2000
    })
    return
  }
  copyText ()
  formSendData.value.id = pid
  const data4 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 1,
    img_list: "",
    action: 5 // 分享标记
  }
  doLikeApi(data4).then(({ code }) => {
    if (code == 0) {
      courseDetailDetail.value.share_num = courseDetailDetail.value.share_num + 1
    }
  })
}

function copyText () {
  try {
    navigator.clipboard.writeText('https://sacasaca.com/#/study-second/' + route.params.id);
    alert('分享链接获取成功' );
  } catch (err) {
    console.error('复制失败', err);
    alert('复制失败，请重试');
  }
}
function beforePhotoUpload(file) {
  // console.log(file)
  const isJPEG = file.type === 'image/jpeg';
  const isJPG = file.type === 'image/jpg';
  const isPNG = file.type === 'image/png';
  // const isLt1M = file.size / 1024 / 1024 < 50;
  // if (!isJPG && !isPNG && !isJPEG) {
  // }
  return isJPG || isPNG || isJPEG;
}
function photoUploadSuccess(res, file) {
  if (res.code == 0) {
    console.log("photoUploadSuccess");
    console.log(currentCommentImgNumber.value)
    // 已经存在的方格里上传图片
    if (commentImgList.value.length == 0) {
      commentImgList.value.push(res.data.url)
      moreCommentImgList.value.push('')
    }else if (commentImgList.value.length > 0 && currentCommentImgNumber.value == commentImgList.value.length) {
      commentImgList.value.push(res.data.url)
      moreCommentImgList.value.push('')
    } else {
      commentImgList.value[currentCommentImgNumber.value] = res.data.url
    }
  }
}

function handleChange(index) {
  currentCommentImgNumber.value = index
  console.log(index)
}
const changeCloseState = (id, state) => {
  if (state == 0) {
    document.getElementById("close"  + id).style.opacity = "0";
  } else {
    document.getElementById("close"  + id).style.opacity = "1";
  }
}
function removeImage(file) {
  if (file == 0) {
    commentImgList.value[0] = ''
  } else {
    commentImgList.value[file] = ''
  }
}
</script>

<template>
  <div class="container" style="display: flex;flex-direction: column;max-width: 2560px;justify-content: space-between;">
    <Head :activeId="3" />
    <div class="body-banner"></div>
    <div class="module-container">
      <div class="module-one" >
        <div class="module-one-body" style="min-width: 828px;">
          <div class="ysk-study-box">
            <div class="top" style="margin-top: 20px;">
              <div class="left">
                <div class="text1">
                  政策
                </div>
                <div class="text1">
                  资讯
                </div>
                <div class="text1">
                  文献
                </div>
                <div class="text1">
                  数据
                </div>
                <div class="text1">
                  课件
                </div>
                <div class="text1">
                  其他
                </div>
              </div>
              <div class="right">
                <div class="right-item">
                  <div class="imgKa"><img :src="aiYaoSuKa11" class="img1" /></div>
                  <div class="text-orange">摘要卡</div>
                </div>
                <div class="right-item">
                  <div class="imgKa"><img :src="aiYaoSuKa2" class="img1" /></div>
                  <div class="text1">应询卡</div>
                </div>
                <div class="right-item">
                  <div class="imgKa"><img :src="aiYaoSuKa3" class="img1" /></div>
                  <div class="text2">要素卡</div>
                </div>
              </div>
            </div>
            <div class="center">
              <div class="left">
                <div class="row1">
                  {{courseDetailDetail.title}}
                </div>
                <div class="row2">
                  <div class="text1">
                    {{courseDetailDetail.pian_total}}篇
                  </div>
                  <div class="text2">
                    关联度区间：{{courseDetailDetail.xiangsidu_qujian}}
                  </div>
                </div>
                <div class="row3">
                  <div class="settingbox">
                    <div class="item" v-if="courseDetailDetail.isDoLike == 0">
                      <a href="javascript:void(0)" @click="doLike(id)"  class="item-like-a">
                        <div class="img-1">
                          <img :src="goodImg" alt="" class="img1" />
                        </div>
                        点赞 ({{courseDetailDetail.good_num}})
                      </a>
                    </div>
                    <div class="item item-like" v-if="courseDetailDetail.isDoLike == 1" @click="doUnLike(id, 1)">
                      <a href="javascript:void(0)"  class="item-like-a">
                        <div class="img-1">
                          <img :src="goodBlue" alt="" class="img1" />
                        </div>
                        点赞 ({{courseDetailDetail.good_num}})
                      </a>
                    </div>
                    <div class="item">
                      <a href="javascript:void(0)" @click="showCommentDialog(id)"  class="item-like-a">
                        <div class="img-1">
                          <img :src="commentImg" alt="" class="img1" />
                        </div>
                        评论 ({{courseDetailDetail.comment_num}})
                      </a>
                    </div>
                    <div class="item">
                      <a href="javascript:void(0)" @click="showShareDialog(id)"  class="item-like-a">
                        <div class="img-1">
                          <img :src="shareImg" alt="" class="img1" />
                        </div>
                        分享 ({{courseDetailDetail.share_num}})
                      </a>
                    </div>
                    <div class="item" v-if="courseDetailDetail.isDoCollected == 0">
                      <a href="javascript:void(0)" @click="doCollect(id)" class="item-like-a">
                        <div class="img-1">
                          <img :src="starImg" alt="" class="img1" />
                        </div>
                        收藏 ({{courseDetailDetail.collect_num}})
                      </a>
                    </div>
                    <div class="item item-like" v-if="courseDetailDetail.isDoCollected == 1"  @click="doUnLike(id, 3)">
                      <a href="javascript:void(0)"  class="item-like-a">
                        <div class="img-1">
                          <img :src="starBlue" alt="" class="img1" />
                        </div>
                        收藏 ({{courseDetailDetail.collect_num}})
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="row1">
                  SACA总括：
                </div>
                <div class="row2">
                  <div class="text1" style="text-indent: 2em; line-height: 22px;text-align: justify;">
                    {{courseDetailDetail.saca_description}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="module-study-area">
        <div class="ysk-study-box">
          <div class="right-top">
            <div class="right-top-item0"></div>
            <div class="right-top-items">
              <div class="right-top-item3"><img :src="ai_lingyu" /></div>
              <div class="right-top-item">领域：</div>
              <div class="right-top-item2">药品生产（动态）</div>
            </div>
            <div class="right-top-items">
              <div class="right-top-item3"><img :src="ai_fenlei" /></div>
              <div class="right-top-item">分类：</div>
              <div class="right-top-item2">岗位职责类</div>
            </div>
            <div class="right-top-items">
              <div class="right-top-item3"><img :src="ai_gongwenbao" /></div>
              <div class="right-top-item">等级：</div>
              <div class="right-top-item2">中等提升</div>
            </div>
            <div class="right-top-items">
              <div class="right-top-item3"><img :src="ai_jiaoxue" /></div>
              <div class="right-top-item">学时：</div>
              <div class="right-top-item2">12学时</div>
            </div>
            <div class="right-top-items">
              <div class="right-top-item3"><img :src="ai_renqun" /></div>
              <div class="right-top-item">适用：</div>
              <div class="right-top-item2">质量管理部门中层负责人</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="module-four-boxes">
      <div class="four-boxes">
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text fagui">法规 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #dbeafe;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy1" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1">法规 法规法规法规法规法规法规法规</div>
            </div>
          </div>
        </div>
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text jianguan">监管 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #F3E8FF;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy2" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 监管监管监管监管监管监管监管监管</div>
            </div>
          </div>
        </div>
      </div>
      <div class="four-boxes">
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text hangye">行业 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #DCFCE7;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy3" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 行业行业行业行业行业行业行业行业</div>
            </div>
          </div>
        </div>
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text shijian">实践 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #FFEDD5;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy4" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 实践实践实践实践实践实践</div>
            </div>
          </div>
        </div>
      </div>
      <div class="four-boxes">
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text yanjiu">研究 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #BCCEFF;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy5" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 研究研究研究研究研究研究</div>
            </div>
          </div>
        </div>
        <div class="four-box">
          <div class="four-box-item-title">
            <div class="four-box-item-title-text wenti">问题 </div>
            <div class="imgKa">
              <div style="width: 64px;height: 64px;background-color: #FEE2E2;border-radius: 50%; text-align: center;line-height: 78px;">
                <img :src="aiStudy6" class="img9" />
              </div>
            </div>
          </div>
          <div class="four-box-item-content">
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
            <div class="title-text">
              <div class="title-text0"><img :src="zuoce" width="30" class="zuoce" height="30" /> </div>
              <div class="title-text1"> 问题问题问题问题问题问题问题问题</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
  <el-dialog v-model="commentDialog" :width="550" title="评论">
    <el-form ref="commentFormRef" label-width="80">
      <el-form-item label="评论内容">
        <el-input type="textarea" :rows="3" style="border-radius: 4px;" resize='none' autocomplete="off" v-model="commentForm" placeholder="请输入评论内容"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <div style="margin-right: 8px;">
          <el-upload class="avatar-uploader"  :action="uploadUrl" name="imgFile"
                     :on-success="photoUploadSuccess" :before-upload="beforePhotoUpload"  @change="handleChange(0)"
                     list-type="picture-card" :auto-upload="true"
                     :show-file-list="false" accept=".jpg,.png,.jpeg">
            <div v-if="commentImgList.length == 0 || commentImgList[0]== ''" class="el-upload__tip">+</div>
            <img @mouseout="changeCloseState(0,0)" @mouseover="changeCloseState(0,1)" v-if="commentImgList[0]" :src="commentImgList[0]" class="avatar"  />
            <div @mouseout="changeCloseState(0,0)" @click.stop="removeImage(0)" @mouseover="changeCloseState(0,1)" :id="'close0'" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',top: '0', left: '0px', width : '16px', height: '16px', backgroundSize: 'contain',opacity: 0 }" ></div>
          </el-upload>
        </div>
        <div v-if="moreCommentImgList.length > 0" v-for="(item,index) in moreCommentImgList" style="margin-right: 8px;">
          <el-upload class="avatar-uploader"  :action="uploadUrl" name="imgFile"
                     :on-success="photoUploadSuccess" :before-upload="beforePhotoUpload" @change="handleChange(index+1)"
                     list-type="picture-card" :auto-upload="true" :show-file-list="false" accept=".jpg,.png,.jpeg">
            <div v-if="commentImgList[index]== ''" class="el-upload__tip">+</div>
            <img @mouseout="changeCloseState(index+1,0)" @mouseover="changeCloseState(index+1,1)" v-if="commentImgList[index+1]" :src="commentImgList[index+1]" class="avatar" />
            <div @mouseout="changeCloseState(index+1,0)" @click.stop="removeImage(index+1)" @mouseover="changeCloseState(index+1,1)"  :id="'close'+ (index+1)" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',top: '0px', left: '0px', width : '16px', height: '16px', backgroundSize: 'contain',opacity: 0 }" ></div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="display: flex;flex-direction: row;justify-content: center;">
          <el-button type="primary" @click="handleComment()">提交</el-button>
          <el-button type="default" @click="cancelComment()">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<style src="@/pages/study/style/index3.css"  scoped></style>
<style>
.img-1 {
  width: 30px;
  line-height: 35px;
  height: 32px;
  margin-right: 2px;
}
.item-like-a {
  display: flex;
  flex-direction: row;
  border-radius: 449px;
  width: 90px;
  height: 32px;
  font-size: 12px;
  line-height: 30px;
  background-color: #ffffff;
}
.item-like-a:hover {
  display: flex;
  flex-direction: row;
  width: 108px;
  height: 32px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  opacity: 0.5;
  justify-content: flex-start;
  background-color: #ECECEC;
}
.item-like {
  background-color: #ffffff;
  color: #00bcfb;
  font-size: 12px;
  .text1 {
    color: #00bcfb;
  }
}
.avatar-uploader {
  width: 60px;
  height: 60px;
}
.el-upload--picture-card {
  width: 60px;
  height: 60px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-upload__tip {
  font-size: 20px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

